<template>
    <div class="CartView">
        <div class="cart">
            <div class="icon">
                <i class="iconfont">&#xe604;</i>
            </div>
            <span class="title">您的购物车还是空空的,快去逛逛吧!</span>
            <div class="btn">
                <RouterLink to="/home">
                    去逛逛
                </RouterLink>
                <RouterLink to="/user/collectionGoods">
                    看看关注
                </RouterLink>
            </div>
        </div>
        <div class="guess">
            <guessYouLike></guessYouLike>
        </div>
        <div class="toTop" v-show="isShowToTop" @click="toTop">
            <i class="iconfont">&#xe88d;</i>
        </div>
    </div>
</template>

<script>
import guessYouLike from '@/components/guessYouLike.vue'
export default {
    components: {
        guessYouLike
    },
    data(){
        return{
            isShowToTop: false,
        }
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll)
    },
    methods:{
        async handleScroll() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop > 400) {
                this.isShowToTop = true
            }else{
                this.isShowToTop = false
            }
        },
        toTop() {
            this.isShowToTop = false
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            })
        },
    }
}
</script>

<style scoped>
.CartView{
    width: 100%;
    position: relative;
    z-index: 1;
}
.cart {
    width: 94.6667vw;
    margin: 2.6667vw auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    padding: 10.6667vw;
    box-sizing: border-box;

    .icon {
        width: 26.6667vw;
        height: 26.6667vw;
        border-radius: 50%;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;

        i.iconfont {
            font-size: 13.3333vw;
            color: #ccc;
        }
    }

    .title {
        font-size: 3.7333vw;
        line-height: 16vw;
    }

    .btn {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 1.3333vw;

        a {
            border: 1px solid #ccc;
            font-size: 3.7333vw;
            padding: 1.6vw 2.6667vw;
            display: block;
            text-decoration: none;
            color: #000;
        }
    }
}

.guess {
    width: 94.6667vw;
    margin: 5.3333vw auto;
}

.CartView  .toTop {
    width: 15.4667vw;
    height: 15.4667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 99;
    right: 5.3333vw;
    bottom: 21.3333vw;

    i.iconfont {
        width: 50px;
        height: 50px;
        display: block;
        font-size: 6.6667vw;
        background-color: #fff;
        border-radius: 50%;
        line-height: 13.3333vw;
    }
}
</style>